// 重置确认对话框组件
// 用于确认重置设置操作

import React from 'react';
import { AlertTriangle, RotateCcw } from 'lucide-react';

interface ResetConfirmDialogProps {
  isOpen: boolean;
  title: string;
  message: string;
  resetType: 'single' | 'category' | 'all';
  settingName?: string;
  categoryName?: string;
  onConfirm: () => void;
  onCancel: () => void;
}

export const ResetConfirmDialog: React.FC<ResetConfirmDialogProps> = ({
  isOpen,
  title,
  message,
  resetType,
  settingName,
  categoryName,
  onConfirm,
  onCancel
}) => {
  if (!isOpen) return null;

  const getResetDetails = () => {
    switch (resetType) {
      case 'single':
        return {
          icon: <RotateCcw className="w-6 h-6 text-blue-600" />,
          description: `将 "${settingName}" 重置为默认值`,
          warning: '此操作将丢失当前的自定义设置。'
        };
      case 'category':
        return {
          icon: <RotateCcw className="w-6 h-6 text-orange-600" />,
          description: `重置 "${categoryName}" 分类下的所有设置`,
          warning: '此操作将丢失该分类下的所有自定义设置。'
        };
      case 'all':
        return {
          icon: <AlertTriangle className="w-6 h-6 text-red-600" />,
          description: '重置所有设置到默认值',
          warning: '此操作将丢失所有自定义设置，包括主题、快捷键、编辑器配置等。'
        };
      default:
        return {
          icon: <RotateCcw className="w-6 h-6 text-gray-600" />,
          description: '重置设置',
          warning: '此操作无法撤销。'
        };
    }
  };

  const details = getResetDetails();

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl p-6 max-w-md w-full mx-4">
        {/* 标题栏 */}
        <div className="flex items-center space-x-3 mb-4">
          {details.icon}
          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
            {title}
          </h3>
        </div>

        {/* 内容 */}
        <div className="space-y-4">
          <p className="text-gray-600 dark:text-gray-400">
            {message}
          </p>

          <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
            <p className="text-sm font-medium text-gray-900 dark:text-white mb-2">
              操作详情：
            </p>
            <p className="text-sm text-gray-600 dark:text-gray-400">
              {details.description}
            </p>
          </div>

          <div className={`
            p-4 rounded-lg border-l-4
            ${resetType === 'all' 
              ? 'bg-red-50 dark:bg-red-900/20 border-red-500' 
              : resetType === 'category'
              ? 'bg-orange-50 dark:bg-orange-900/20 border-orange-500'
              : 'bg-blue-50 dark:bg-blue-900/20 border-blue-500'
            }
          `}>
            <div className="flex items-start space-x-2">
              <AlertTriangle className={`
                w-4 h-4 mt-0.5 flex-shrink-0
                ${resetType === 'all' 
                  ? 'text-red-600' 
                  : resetType === 'category'
                  ? 'text-orange-600'
                  : 'text-blue-600'
                }
              `} />
              <div>
                <p className={`
                  text-sm font-medium
                  ${resetType === 'all' 
                    ? 'text-red-800 dark:text-red-200' 
                    : resetType === 'category'
                    ? 'text-orange-800 dark:text-orange-200'
                    : 'text-blue-800 dark:text-blue-200'
                  }
                `}>
                  注意
                </p>
                <p className={`
                  text-sm
                  ${resetType === 'all' 
                    ? 'text-red-700 dark:text-red-300' 
                    : resetType === 'category'
                    ? 'text-orange-700 dark:text-orange-300'
                    : 'text-blue-700 dark:text-blue-300'
                  }
                `}>
                  {details.warning}
                </p>
              </div>
            </div>
          </div>

          {resetType === 'all' && (
            <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-3">
              <p className="text-sm text-yellow-800 dark:text-yellow-200">
                💡 建议在重置前导出当前设置作为备份。
              </p>
            </div>
          )}
        </div>

        {/* 操作按钮 */}
        <div className="flex justify-end space-x-3 mt-6">
          <button
            onClick={onCancel}
            className="px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
          >
            取消
          </button>
          <button
            onClick={onConfirm}
            className={`
              px-4 py-2 text-white rounded-md transition-colors
              ${resetType === 'all'
                ? 'bg-red-600 hover:bg-red-700'
                : resetType === 'category'
                ? 'bg-orange-600 hover:bg-orange-700'
                : 'bg-blue-600 hover:bg-blue-700'
              }
            `}
          >
            {resetType === 'all' ? '重置所有设置' : '确认重置'}
          </button>
        </div>
      </div>
    </div>
  );
};

// 重置类型的辅助函数
export const createResetConfirmProps = (
  type: 'single' | 'category' | 'all',
  settingName?: string,
  categoryName?: string
) => {
  switch (type) {
    case 'single':
      return {
        title: '重置设置项',
        message: `确定要重置 "${settingName}" 设置吗？`,
        resetType: type,
        settingName
      };
    case 'category':
      return {
        title: '重置分类设置',
        message: `确定要重置 "${categoryName}" 分类下的所有设置吗？`,
        resetType: type,
        categoryName
      };
    case 'all':
      return {
        title: '重置所有设置',
        message: '确定要将所有设置重置为默认值吗？',
        resetType: type
      };
    default:
      return {
        title: '重置设置',
        message: '确定要重置设置吗？',
        resetType: 'single' as const
      };
  }
};
